<template>
    <div class="order-item">
        <div class="body">
            <div class="header row">
                <div class="info">下单时间：{{ timeStr }}</div>
                <div class="state">已下单</div>
            </div>

            <div class="content row">
                <div class="list row">
                    <div
                        class="product-item column"
                        v-for="(productItem, index) in item.cartList"
                        :key="index"
                    >
                        <div class="img">
                            <img :src="productItem.img" />
                        </div>
                        <div class="title">{{ productItem.title }}</div>
                    </div>
                </div>

                <div class="info column">
                    <div class="price-pay">￥{{ item.orderPricePay }}</div>
                    <div class="order-count">
                        共{{ item.cartList.length }}件
                    </div>
                </div>
            </div>
            <div class="footer row">
                <!-- <div class="btn">取餐码</div> -->
                <!-- <div class="btn">再来一单</div> -->
            </div>
        </div>
    </div>
</template>

<script>
import { getDateInfo } from "@/utils/date.js";
export default {
    props: {
        item: {
            type: Object,
            default() {
                return {
                    initTime: new Date().getTime(),
                    payMethod: "wechat",
                    pickMethod: "arrival", // take
                    pickTime: "immediate", // 10 20 30
                    deviceId: "",
                    userId: "",
                    openId: "",
                    telephone: "",
                    userInfo: {},
                    cartMapList: [],
                    cartList: [
                        {
                            title: "晚香一颗柠",
                            img:
                                "http://p0.meituan.net/wmproduct/3eec7836bfac582eccad598a5213d5d482456.jpg"
                        },
                        {
                            title: "晚香一颗柠",
                            img:
                                "http://p0.meituan.net/wmproduct/3eec7836bfac582eccad598a5213d5d482456.jpg"
                        },
                        {
                            title: "晚香一颗柠",
                            img:
                                "http://p0.meituan.net/wmproduct/3eec7836bfac582eccad598a5213d5d482456.jpg"
                        },
                        {
                            title: "晚香一颗柠",
                            img:
                                "http://p0.meituan.net/wmproduct/3eec7836bfac582eccad598a5213d5d482456.jpg"
                        },
                        {
                            title: "晚香一颗柠",
                            img:
                                "http://p0.meituan.net/wmproduct/3eec7836bfac582eccad598a5213d5d482456.jpg"
                        },
                        {
                            title: "晚香一颗柠",
                            img:
                                "http://p0.meituan.net/wmproduct/3eec7836bfac582eccad598a5213d5d482456.jpg"
                        }
                    ],
                    orderPricePay: 100
                };
            }
        }
    },
    data() {
        return {};
    },
    computed: {
        timeStr() {
            const d = getDateInfo(this.item.initTime);
            return `${d.month}月${d.dayStr}号 ${d.hourStr}:${d.minuteStr}`;
        }
    },

    methods: {}
};
</script>


<style lang="less" scoped>
.order-item {
    background: #fff;
    padding: 30px 30px;
    border-radius: 10px;
    .body {
        width: 100%;

        .header {
            padding: 0 0 30px 0;
            justify-content: space-between;
        }

        .content {
            justify-content: space-between;
            .list {
                flex: 1 1 auto;
                overflow-x: scroll;
                padding-bottom: 30px;

                &::-webkit-scrollbar {
                    display: none;
                }

                .product-item {
                    align-items: center;
                    padding-right: 15px;
                    .img {
                        width: auto;
                        height: 100px;
                        margin-bottom: 6px;
                        img {
                            width: auto;
                            height: 100%;
                        }
                    }
                    .title {
                        font-size: 24px;
                    }
                }
            }
            .info {
                align-items: flex-end;
                justify-content: center;
                padding-left: 40px;
                background: #fff;

                .price-pay {
                    font-size: 32px;
                    font-weight: 600;
                    margin-bottom: 10px;
                }
            }
        }

        .footer {
            padding: 0 0 0 0;
            justify-content: flex-end;

            .btn {
                border: 1px solid #aaa;
                padding: 10px 20px;
                border-radius: 8px;
                margin-left: 20px;
            }
        }
    }
}
</style>